<template>
  <div class="orders">
    <div class="order-title">
      <div @click="goBack"><van-icon size="20" name="arrow-left" /></div>
      <div class="user">用户结算</div>
    </div>
    <div class="order-box">
      <div class="order-item" v-for="(item, index) in list" :key="index">
        <div class="o-img"><img :src="`${item.url}`" alt="" /></div>
        <div class="o-name">
          {{ item.name }} {{ item.level }} {{ item.color }}
        </div>
        <div class="o-price">
          ￥{{ item.price }}
          <div style="text-align: end; color: rgba(0, 0, 0, 0.5)">
            x{{ item.number }}
          </div>
        </div>
      </div>
    </div>
    <div class="order-desc">
      <div class="yunfei">
        <div style="font-weight: bold">运费</div>
        <div style="color: #bdbdbd">包邮</div>
      </div>
      <div class="fapiao">
        <div style="font-weight: bold">电子普通发票</div>
        <div style="color: #bdbdbd">个人<van-icon name="arrow-down" /></div>
      </div>
      <div class="youhuiquan">
        <div style="font-weight: bold">优惠劵</div>
        <div style="color: #bdbdbd">无可用<van-icon name="arrow-down" /></div>
      </div>
    </div>
    <div class="order-pay">
      <div class="p-price">
        商品价格:
        <span style="font-weight: normal"> {{ total }}.00</span>
      </div>
      <div class="p-ps">
        配送费用:
        <span style="font-weight: normal">0.00</span>
      </div>
    </div>
    <div class="order-footer">
      <div class="o-num">共{{ num }}件</div>
      <div class="o-total">
        合计:￥
        <i style="font-size: 20px; font-weight: bold">{{ total }}</i>
      </div>
      <div @click="pay" class="o-pay">去付款</div>
    </div>
    <van-popup v-model:show="show" round closeable close-icon="close" position="bottom" :style="{ height: '70%' }"
      @close=cancelPay style="background-color: #f5f5f5">
      <div class="pay">
        <div class="money">￥{{ total }}</div>
        <div class="p-message" v-show="!showIpt">
          <div style="width: 20vw">收货信息：</div>
          <div style="width: 60vw">
            <div>
              {{ userStore.address[0].name }} {{ userStore.address[0].tel }}
            </div>
            <div>
              <span>{{ userStore.address[0].province }}</span>
              <span>{{ userStore.address[0].city }}</span>
              <span>{{ userStore.address[0].county }}</span>
              <span>{{ userStore.address[0].addressDetail }}</span>
            </div>
          </div>
        </div>
        <div class="p-tool" v-show="!showIpt">
          <p>支付工具</p>
          <div class="p-box" v-for="item in tList" :key="item.id">
            <div class="p-img"><img :src="`${item.url}`" alt="" /></div>
            <div class="p-word">
              {{ item.name }}
              <div>{{ item.desc }}</div>
            </div>
            <div @click="getIndex(item.id)" class="dot" :class="{ active: index == item.id }"></div>
          </div>
        </div>
        <div @click="isPay" class="p-footer">确认支付￥{{ total }}</div>
        <div class="inputPassword" v-show="showIpt">
          <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true"
            :error-info="errorInfo" />
          <div class="close" ><span @click="closeBtn">关闭</span></div>
          <!-- 数字键盘 -->
          <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { SubmitOrder } from "../../stores/userStore/order";
import { useUserStore } from "../../stores/userStore/user";
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";
import { Dialog, Snackbar } from '@varlet/ui'

const orderStore = SubmitOrder();
const router = useRouter()
const userStore = useUserStore();
const list = ref(orderStore.orderObj);
const num = ref(0);
const total = ref(0);
const show = ref(false);
const index = ref(0)
const flag = ref(false)
const value = ref('');
const showIpt = ref(false)
const showKeyboard = ref(false);
const errorInfo = ref('');
const tList = ref([
  {
    id: 1,
    url: "https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_alipaywap.png",
    name: "支付宝支付",
    desc: "支付宝（中国）网络技术有限公司",
  },
  {
    id: 2,
    url: "https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_micash_wap.png",
    name: "华米钱包",
    desc: "捷付通有限公司",
  },
  {
    id: 3,
    url: "https://cdn.cnbj1.fds.api.mi-img.com//staticsfile/mobile/pay-icons/pay_weixin_wap.png",
    name: "微信支付",
    desc: "财付通支付科技有限公司",
  },
]);


const getIndex = (i) => {
  index.value = i;
  flag.value = true
}

const getNum = () => {
  for (let i = 0; i < list.value.length; i++) {
    num.value += list.value[i].number;
  }
  // console.log(num.value);
};

const goBack = () => {
  window.history.back();
};

const getTotal = () => {
  for (let i = 0; i < list.value.length; i++) {
    total.value += list.value[i].number * list.value[i].price;
  }
  // console.log(total.value);
};

const pay = () => {

  show.value = true;
  userStore.clearCar(list.value)
};
const closeBtn = () => {
  showIpt.value = false
  value.value = ''
}

watch(value, (newVal) => {

  if (newVal.length === 6 && newVal !== '123456') {
    errorInfo.value = '密码错误';

  } else {
    errorInfo.value = '';


    if (newVal.length === 6 && newVal == '123456') {
      orderStore.overBtn()
      orderStore.cancelOrder(list.value)

      ElMessage({
        message: '支付成功',
        type: 'success',
      })
      router.push('/')

    }


  }
});
const isPay = () => {
  if (flag.value) {
    showIpt.value = true
  showKeyboard.value = true

  } else {
    ElMessage({
      message: '请选择支付方式',
      type: 'warning',
    })
  }
}

const actions = {
  confirm: () => {
    show.value = true
    return Snackbar.success('继续支付')
  },
  cancel: () => {


    orderStore.cancelPay()

    router.replace({
      name: 'order',
      query: {
        index: 1, name: '待付款'
      }
    })

    return Snackbar.info('取消支付')
  },
  close: () => {
    orderStore.cancelPay()
    router.replace({
      name: 'order',
      query: {
        index: 1, name: '待付款'
      }
    })
    return Snackbar.info('取消支付')
  },
}
const cancelPay = async () => {

  actions[await Dialog('是否继续支付')]()
}
onMounted(() => {
  getNum();
  getTotal();
});
</script>

<style scoped>
.orders {
  background-color: #f5f5f5;
  height: 100vh;
}

.order-title {
  background-color: #f2f2f2;
  display: flex;
  padding: 10px 10px;
  border-bottom: 4px dashed rgb(251, 96, 0);
  position: sticky;
  top: 0px;
}

.user {
  color: rgb(102, 102, 102);
  margin-left: 34vw;
}

.order-box {
  margin-top: 20px;
}

.order-item {
  margin: 0px auto;
  width: 90vw;
  display: flex;
  padding: 10px 5vw;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  background-color: white;
  position: relative;
}

.o-img img {
  width: 43px;
}

.o-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 60vw;
  font-size: 13px;
  color: #3c3c3c;
}

.o-price {
  font-size: 13px;
  font-weight: bold;
}

.order-footer {
  font-size: 16px;
  color: #ff4d14;
  background-color: #fff;
  width: 90vw;
  display: flex;
  align-items: center;
  padding: 2vh 5vw;
  position: fixed;
  bottom: 0px;
  z-index: 999;
}

.o-num {
  padding-top: 0.1vh;
  flex: 0 0 12vw;
}

.o-total {
  flex: 0 0 30vw;
}

.o-pay {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 6.7vh;
  line-height: 6.7vh;
  width: 50vw;
  color: white;
  text-align: center;
  flex: 0 0 40vw;
  background-color: #ff5722;
}

.order-desc {
  margin-top: 2vh;
  background-color: #fff;
}

.fapiao,
.youhuiquan,
.yunfei {
  font-size: 13px;
  color: #3c3c3c;
  padding: 20px 5vw;
  display: flex;
  justify-content: space-between;
}

.order-pay {
  margin-top: 2vh;
  background-color: #fff;
  padding: 20px 5vw;
}

.p-price,
.p-ps {
  font-size: 13px;
  line-height: 2;
  font-weight: bold;
}

.yunfei,
.fapiao {
  border-bottom: 1px #f1eaea solid;
}

.money {
  width: 100px;
  margin: 3vh auto;
  color: #ff5934;
  font-size: 30px;
}

.p-footer {
  width: 80vw;
  text-align: center;
  background-color: #ff7623;
  padding: 1vh 5vw;
  color: white;
  border-radius: 888px;
  position: absolute;
  bottom: 1vh;
  left: 5vw;
}

.p-message {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.3);
  width: 80vw;
  margin: 0 auto;
  display: flex;
  background-color: #fff;
  padding: 2vh 5vw;
  border-radius: 10px;
}

.p-tool {
  width: 80vw;
  margin: 2vh auto;
  background-color: #fff;
  padding: 2vh 5vw;
  border-radius: 10px;
}

.p-img img {
  width: 27px;
}

.p-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2vh 0;
}

.p-word {
  width: 60vw;
  font-size: 14px;
}

.p-word div {
  font-size: 11px;
  color: #999;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px rgb(128, 125, 125) solid;
}

.active {
  border: 1px solid red;
  background-color: red;
}

.close{
  text-align: center;
  margin-top: 15px;
}
</style>